<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        html,body,#container{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;

        }
        #container #header{
            flex:0 0 80px;
            width: 100%;
            background-color: #FF6724;
        }
        #container #footer{
                flex: 0 0 30px;
                width: 100%;
                background-color: #23C2FF;
        }
        #container #center{
            flex: 1;
            background-color: gainsboro;
            display: flex;
            flex-direction: row;
        }
        #container #center #left{
            flex: 0 0 200px;
            background-color: black;

        }
        #container #center #right{
            flex: 1;
            /*background-color: darkgreen;*/
        }
    </style>
</head>

<body>
<div id="container">
    <div id="header" >
        <iframe src="head.html"  style="width: 100%; height: 80px" frameborder="0" scrolling="no"></iframe>
    </div>
    <div id="center">
        <div id="left">
            <iframe src="left.html" style="width: 100%; height:100%" scrolling="no"></iframe>
        </div>
        <div id="right">
            <iframe src="center.html" name="main"  style="width: 100%; height:100%" frameborder="0" scrolling="no"></iframe>
        </div>
    </div>

    <div id="footer">
        <iframe src="botton.html"  style="width: 100%; height: 50px" frameborder="0" scrolling="no"></iframe>
    </div>

</div>
</body>
</html>